<template>
  <div style="width: 100%">
    <swiper
      :slides-per-view="props.num || 1"
      :space-between="props.space || 50"
      :navigation="!nav"
      :modules="modules"
      :autoplay="
        props.auto ? { delay: 4000, disableOnInteraction: false } : undefined
      "
    >
      <swiper-slide v-if="props.items" v-for="item in props.items">
        <slot :item="item" name="item">
          <img class="banner_img" :src="item.coverUrl" alt="" />
        </slot>
      </swiper-slide>
      <swiper-slide v-else v-for="img in props.imgs">
        <slot :img="img" name="img">
          <img class="banner_img" :src="img.imageUrl" alt="" />
        </slot>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts">
export default {
  name: '',
}
</script>

<script lang="ts" setup>
import { ref, reactive, defineProps } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper'

import 'swiper/css/navigation'
import 'swiper/css'

//自动播放
import 'swiper/css/autoplay'
import { bannerList } from '@/api/model/banner'
import { CDList } from '@/api/model/CD'
const props = defineProps<{
  imgs?: bannerList
  items?: CDList
  num?: number
  nav?: boolean
  space?: number
  auto?: boolean
}>()
console.log(props.auto)

const modules = ref([Navigation, Pagination, Autoplay])
</script>

<style scoped></style>
